<template>
	<view class="index">
		<!-- @confirm 监听回车，手机确认键 -->
		 <input type="text" v-model="temp" placeholder="请输入计划" @confirm="addList">
		 <view class="title">未完成 ({{unList.length}})</view>
		 <view v-for="item in unList" :key="item.title">
			 <switch :checked="item.done" @change="changeList(item,$event.detail.value)" type="checkbox" />
			 <text>{{item.title}}</text>
			 <button size="mini" @click="removeList(item)">x</button>
		 </view>
		 <view class="title">已完成 ({{doneList.length}})</view>
		 <view v-for="item in doneList" :key="item.title" type="checkbox" >
			 <switch  :checked="item.done" @change="changeList(item,$event.detail.value)" type="checkbox" />
			 <text>{{item.title}}</text>
			 <button size="mini" @click="removeList(item)">x</button>
		 </view>
	</view>
</template>
<script>
	export default{
		data(){
			return {
				// list 计划，done是否完成，title计划的标题，
				// 先从本地获取，获取不到就用默认值
				list:uni.getStorageSync("list")||[{title:'学习react',done:false}],
				temp:'',//临时要被添加的数据
			}
		},
		computed:{
			// 完成列表
			doneList(){
				// filter 如果箭头函数返回真，则元素保留，（保留done为true的元素）
				return this.list.filter(item=>item.done)
			},
			// 未完成列表 （保留done为false的元素）
			unList(){
				return this.list.filter(item=>!item.done)
			},
		},
		methods:{
			// 添加计划
			addList(){
				// 如果没有或者temp为空则返回
				if(!this.temp){return}
				// unshift添加到前面，默认done为false
				this.list.unshift({done:false,title:this.temp})
				// 设置temp为空，清空文本框
				this.temp = "";
			},
			// 修改
			changeList(item,flag){
				// 获取当前被修改元素在list的下标  如果修改的标题item与遍历元素it的标题一致，
				// 查出对应修改元素下标
				var index = this.list.findIndex(it=>it.title==item.title);
				// 设置下标元素done值为传入flag（$event.detail.value）
				this.list[index].done = flag;
			},
			// 移除计划
			removeList(item){
				// 查，删除元素在list中的下标
				var index = this.list.findIndex(it=>it.title==item.title);
				// 从index个删除一个
				this.list.splice(index,1);
			}
		},
		watch:{
			// 监听列表的变化实现存储
			list:{
				handler(nval){
					// 深度监听list变化存储list
					uni.setStorageSync("list",this.list);
				},
				deep:true
			}
		}
	 
	}
	// 分析：
	// data：temp临时被添加的数据，list计划列表 {title,done}
	// 计算：doneList unList
	// 方法：addList，removeList
	// dom：
	// 监听：list 存储list
</script>
<style scoped lang="scss">
	input{
		height: 66rpx;
		line-height: 66rpx;
		border:1rpx solid #f0f0f0;
		border-radius: 12rpx;
		padding: 0 15rpx;
		margin: 15rpx;
	}
	.title{
		height: 88rpx;
		line-height: 88rpx;
		background-color: #f0f0f0;
		padding: 0 15rpx;
		// border-top: 4rpx solid #f30;
	}
	
</style>